<!doctype html><html><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=robots content="noodp"><meta http-equiv=x-ua-compatible content="IE=edge, chrome=1"><title>Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章 - Yulin Lewis' Blog</title><meta name=keywords content="雨临Lewis,Java,hugo,hexo,博客"><meta name=Description content="不想当写手的码农不是好咸鱼_(xз」∠)_"><meta property="og:title" content="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章"><meta property="og:description" content="前言
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：


1
2
3


hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10


请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：

Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章
Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta property="og:type" content="article"><meta property="og:url" content="https://lewky.cn/posts/hugo-3.1.html/"><meta property="og:image" content="https://lewky.cn/logo.png"><meta property="article:published_time" content="2021-05-29T13:11:16+08:00"><meta property="article:modified_time" content="2021-12-28T13:21:16+08:00"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://lewky.cn/logo.png"><meta name=twitter:title content="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章"><meta name=twitter:description content="前言
本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：


1
2
3


hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10


请注意，本文的所有功能都离不开两个新增加的文件：_custom.scss和custom.js，部分功能还需要jquery，在第一章中会提及如何引入。
另外本文篇幅太长，阅读体验不好，将其进行分章如下：

Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章
Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章
Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章
Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章"><meta name=application-name content="雨临Lewis的博客"><meta name=apple-mobile-web-app-title content="雨临Lewis的博客"><meta name=theme-color content="#ffffff"><meta name=msapplication-TileColor content="#da532c"><link rel="shortcut icon" type=image/x-icon href=/favicon.ico><link rel=icon type=image/png sizes=32x32 href=/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/favicon-16x16.png><link rel=apple-touch-icon sizes=180x180 href=/apple-touch-icon.png><link rel=mask-icon href=/safari-pinned-tab.svg color=#5bbad5><link rel=manifest href=/site.webmanifest><link rel=canonical href=https://lewky.cn/posts/hugo-3.1.html/><link rel=prev href=https://lewky.cn/posts/java-generic.html/><link rel=next href=https://lewky.cn/posts/hugo-3.2.html/><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css><link rel=stylesheet href=/css/style.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/animate.css@3.7.2/animate.min.css><script type=application/ld+json>{"@context":"http://schema.org","@type":"BlogPosting","headline":"Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章","inLanguage":"","mainEntityOfPage":{"@type":"WebPage","@id":"https:\/\/lewky.cn\/posts\/hugo-3.1.html\/"},"genre":"posts","keywords":"Hugo, LoveIt主题, 主题美化, 功能增强","wordcount":10419,"url":"https:\/\/lewky.cn\/posts\/hugo-3.1.html\/","datePublished":"2021-05-29T13:11:16+08:00","dateModified":"2021-12-28T13:21:16+08:00","license":"This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.","publisher":{"@type":"Organization","name":"雨临Lewis","logo":"https:\/\/lewky.cn\/images\/avatar.jpg"},"author":{"@type":"Person","name":"雨临Lewis"},"description":""}</script></head><body header-desktop=fixed header-mobile=auto><script type=text/javascript>(window.localStorage&&localStorage.getItem('theme')?localStorage.getItem('theme')==='dark':('auto'==='auto'?window.matchMedia('(prefers-color-scheme: dark)').matches:'auto'==='dark'))&&document.body.setAttribute('theme','dark');</script><div id=mask></div><div class=wrapper><header class=desktop id=header-desktop><div class=header-wrapper><a href=https://github.com/lewky class=github-corner target=_blank title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="3.5rem" height="3.5rem" viewBox="0 0 250 250" style="fill:#70b7fd;color:#fff;position:absolute;top:0;border:0;left:0;transform:scale(-1,1)" aria-hidden="true"><path d="M0 0 115 115h15l12 27L250 250V0z"/><path d="M128.3 109C113.8 99.7 119 89.6 119 89.6 122 82.7 120.5 78.6 120.5 78.6 119.2 72 123.4 76.3 123.4 76.3 127.3 80.9 125.5 87.3 125.5 87.3 122.9 97.6 130.6 101.9 134.4 103.2" fill="currentcolor" style="transform-origin:130px 106px" class="octo-arm"/><path d="M115 115C114.9 115.1 118.7 116.5 119.8 115.4L133.7 101.6C136.9 99.2 139.9 98.4 142.2 98.6 133.8 88 127.5 74.4 143.8 58 148.5 53.4 154 51.2 159.7 51 160.3 49.4 163.2 43.6 171.4 40.1 171.4 40.1 176.1 42.5 178.8 56.2 183.1 58.6 187.2 61.8 190.9 65.4 194.5 69 197.7 73.2 200.1 77.6 213.8 80.2 216.3 84.9 216.3 84.9 212.7 93.1 206.9 96 205.4 96.6 205.1 102.4 203 107.8 198.3 112.5 181.9 128.9 168.3 122.5 157.7 114.1 157.9 116.9 156.7 120.9 152.7 124.9L141 136.5C139.8 137.7 141.6 141.9 141.8 141.8z" fill="currentcolor" class="octo-body"/></svg></a><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu><div class=menu-inner><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索
</a><span class="menu-item delimiter"></span><a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></div></header><header class=mobile id=header-mobile><div class=header-container><div class=header-wrapper><div class=header-title><a href=/ title="Yulin Lewis' Blog"><span class=header-title-pre><i class="fas fa-fw fa-atom"></i></span>雨临Lewis</a></div><div class=menu-toggle id=menu-toggle-mobile><span></span><span></span><span></span></div></div><div class=menu id=menu-mobile><div class=dropdown><a href=/posts/ class="menu-item menu-more dropbtn" title=点击查看所有文章><i class="fas fa-fw fa-archive"></i>归档</a><div class="menu-more-content dropdown-content"><a href=/categories/><i class="fas fa-fw fa-th"></i>分类 </a><a href=/tags/><i class="fas fa-fw fa-tag"></i>标签 </a><a href=/hot/ title=文章热度Top15><i class="fas fa-fw fa-fire"></i>热度 </a><a href=/donation/ title=感谢打赏，老板大气~><i class="fas fa-fw fa-donate"></i>打赏 </a><a href=/about/><i class="fas fa-fw fa-at"></i>关于</a></div></div><a class=menu-item href=/friends/ title=欢迎申请友链><i class="fas fa-fw fa-link"></i>友链</a><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn" title=一些有意思的东东~><i class="fas fa-fw fa-fan fa-spin"></i>趣味</a><div class="menu-more-content dropdown-content"><a href=/funny/high/ title="前方高能♂ 小心外放！" target=_blank rel=noopener><i class="fas fa-fw fa-dizzy"></i>燥起来！ </a><a href=/funny/mikutap/ title=初音未来音乐游戏 target=_blank rel=noopener><i class="fas fa-fw fa-music"></i>在线打碟 </a><a href=/funny/catch-the-cat/ title=逮住那只猫!><i class="fas fa-fw fa-cat"></i>抓住猫咪</a></div></div><div class=dropdown><a href=/ class="menu-item menu-more dropbtn" title=回到首页><i class="fas fa-fw fa-atom"></i>站点</a><div class="menu-more-content dropdown-content"><a href=/bbs/ title=来留言吧~><i class="fas fa-fw fa-comment"></i>公告留言 </a><a href=https://seo.chinaz.com target=_blank rel=noopener><i class="fas fa-fw fa-chart-line"></i>SEO查询 </a><a href=https://www.ping.cn/http/lewky.cn target=_blank rel=noopener><i class="fas fa-fw fa-bezier-curve"></i>网站测速 </a><a href=/posts/e62c38c4.html/><i class="fas fa-fw fa-cog fa-spin"></i>建站日志</a></div></div><div class=dropdown><a href=javascript:void(0); class="menu-item menu-more dropbtn"><i class="fas fa-fw fa-book"></i>文档</a><div class="menu-more-content dropdown-content"><a href=https://gohugo.io/documentation/ target=_blank rel=noopener><i class="fas fa-fw fa-star"></i>Hugo文档 </a><a href=https://javanote.doc.lewky.cn/ title=尚在完善中~ target=_blank rel=noopener><i class="fab fa-fw fa-java"></i>Java 笔记</a></div></div><a class=menu-item href=/search/ title=渲染搜索结果需要等待几秒钟~><i class="fas fa-fw fa-search"></i>搜索</a>
<a href=https://travellings.link target=_blank class=menu-item rel=noopener title=开往-友链接力><i class="fas fa-fw fa-subway"></i></a><a href=https://rssblog.vercel.app/ class=menu-item target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i></a><a href=https://github.com/lewky class=menu-item target=_blank rel=noopener title=GitHub><i class="fab fa-fw fa-github"></i></a></div></div></header><div class="search-dropdown desktop"><div id=search-dropdown-desktop></div></div><div class="search-dropdown mobile"><div id=search-dropdown-mobile></div></div><main class=main><div class=container><div class=toc id=toc-auto><h2 class=toc-title>目录</h2><div class=toc-content id=toc-content-auto></div></div><article class="page single"><h1 class="single-title animated flipInX">Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章</h1><div class=post-meta><div class=post-meta-line><span class=post-author><a href=/ title=Author rel=author class=author><i class="fas fa-user-circle fa-fw"></i>雨临Lewis</a></span>&nbsp;<span class=post-category>收录于 <a href=/categories/hugo%E7%B3%BB%E5%88%97/><i class="far fa-folder fa-fw"></i>Hugo系列</a></span></div><div class=post-meta-line><i class="far fa-calendar fa-fw"></i>&nbsp;<time datetime=2021-05-29>2021-05-29</time>&nbsp;<i class="far fa-calendar-plus fa-fw"></i>&nbsp;<time datetime=2021-12-28>2021-12-28</time>&nbsp;<i class="fas fa-pencil-alt fa-fw"></i>&nbsp;约 10419 字
<i class="far fa-clock fa-fw"></i>&nbsp;预计阅读 21 分钟&nbsp;<span id=/posts/hugo-3.1.html/ class=leancloud_visitors data-flag-title="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章">
<i class="far fa-eye fa-fw"></i>&nbsp;<span class=leancloud-visitors-count></span>&nbsp;次阅读
</span>&nbsp;
<a href=#comments id=post-meta-vcount title=查看评论><i class="fas fa-comment fa-fw"></i>&nbsp;<span id=/posts/hugo-3.1.html/ class=waline-comment-count></span>&nbsp;条评论</a></div></div><div class="details toc" id=toc-static kept><div class="details-summary toc-title"><span>目录</span>
<span><i class="details-icon fas fa-angle-right"></i></span></div><div class="details-content toc-content" id=toc-content-static><nav id=TableOfContents><ol><li><a href=#前言>前言</a></li><li><a href=#valine评论系统添加邮件通知和qq提醒>Valine评论系统添加邮件通知和QQ提醒</a><ol><li><a href=#部署leancloud云引擎>部署LeanCloud云引擎</a></li><li><a href=#设置环境变量>设置环境变量</a></li><li><a href=#后台评论管理>后台评论管理</a></li><li><a href=#配置qq提醒>配置QQ提醒</a></li><li><a href=#解决云引擎休眠>解决云引擎休眠</a></li></ol></li><li><a href=#解决免费版云引擎流控问题>解决免费版云引擎流控问题</a><ol><li><a href=#方案一github--actions>方案一：<code>GitHub + Actions</code></a></li><li><a href=#方案二借助国内其他的免费云函数或定时任务>方案二：借助国内其他的免费云函数或定时任务</a></li><li><a href=#方案三cloudflare的workers>方案三：<code>cloudflare</code>的<code>Workers</code></a></li><li><a href=#方案四借助cron-job平台进行每日定时唤醒>方案四：借助<code>cron-job</code>平台进行每日定时唤醒</a></li></ol></li><li><a href=#使用waline替代valine评论系统>使用Waline替代Valine评论系统</a><ol><li><a href=#站点配置文件添加相关变量>站点配置文件添加相关变量</a></li><li><a href=#修改commenthtml模板文件>修改comment.html模板文件</a></li><li><a href=#添加评论统计到文章元数据>添加评论统计到文章元数据</a></li><li><a href=#添加样式>添加样式</a></li><li><a href=#部署到vercel>部署到Vercel</a></li><li><a href=#使用评论通知功能>使用评论通知功能</a></li><li><a href=#waline--vercel的使用体验>Waline + Vercel的使用体验</a></li></ol></li><li><a href=#添加百度统计>添加百度统计</a><ol><li><a href=#添加百度统计相关变量>添加百度统计相关变量</a></li><li><a href=#将百度统计的脚本代码添加到analyticshtml里>将百度统计的脚本代码添加到analytics.html里</a></li><li><a href=#启用百度统计>启用百度统计</a></li></ol></li><li><a href=#添加鼠标右键菜单>添加鼠标右键菜单</a><ol><li><a href=#添加右键菜单的变量>添加右键菜单的变量</a></li><li><a href=#添加rightmenuhtml文件>添加<code>rightmenu.html</code>文件</a></li><li><a href=#修改assetshtml文件>修改<code>assets.html</code>文件</a></li></ol></li><li><a href=#添加文章加密功能>添加文章加密功能</a></li><li><a href=#添加github-corner>添加GitHub Corner</a></li><li><a href=#页面下方添加拉姆雷姆快捷跳转>页面下方添加拉姆雷姆快捷跳转</a></li><li><a href=#添加首页头像挂件>添加首页头像挂件</a><ol><li><a href=#修改站点配置文件>修改站点配置文件</a></li><li><a href=#修改模板文件profilehtml>修改模板文件profile.html</a></li><li><a href=#修改模板文件assetshtml>修改模板文件assets.html</a></li><li><a href=#添加css代码>添加css代码</a></li></ol></li><li><a href=#参考链接>参考链接</a></li></ol></nav></div></div><div class=content id=content><h2 id=前言>前言</h2><p>本博客使用的是Hugo的LoveIt主题，本文也是基于该主题而写的，不过Hugo的美化步骤应该大同小异，版本如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>hugo: v0.74.2/extended windows/amd64 BuildDate: unknown

LoveIt: v0.2.10
</code></pre></td></tr></table></div></div><p><strong>请注意，本文的所有功能都离不开两个新增加的文件：<code>_custom.scss</code>和<code>custom.js</code>，部分功能还需要<code>jquery</code>，在第一章中会提及如何引入。</strong></p><p>另外本文篇幅太长，阅读体验不好，将其进行分章如下：</p><ul><li><a href=/posts/hugo-3.html/ rel>Hugo系列(3.0) - LoveIt主题美化与博客功能增强 · 第一章</a></li><li><a href=/posts/hugo-3.1.html/ rel>Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章</a></li><li><a href=/posts/hugo-3.2.html/ rel>Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章</a></li><li><a href=/posts/hugo-3-3/ rel>Hugo系列(3.3) - LoveIt主题美化与博客功能增强 · 第四章</a></li></ul><h2 id=valine评论系统添加邮件通知和qq提醒>Valine评论系统添加邮件通知和QQ提醒</h2><p>LoveIt主题自带的Valine没有邮件通知和QQ提醒功能，所以需要额外使用Valine的增强版<code>Valine-Admin</code>来进行功能增强。网上有好几个版本，我这里选择了目前由@W4J1e维护的<code>Hexo-Valine-ASPush</code>项目，由于我需要自定义部分改动，所以自己fork了一份：<a href=https://github.com/lewky/valine-admin-custom target=_blank rel="noopener noreffer">valine-admin-custom</a>。如果需要进行自定义改动的，可以继续fork我的这个项目。</p><p>下面开始教程。这里默认你已经使用了Valine作为评论系统，如果还没有对应的LeanCloud应用请自行移步Valine的官方文档： <a href=https://valine.js.org/quickstart.html target=_blank rel="noopener noreffer">Valine快速开始</a>。</p><h3 id=部署leancloud云引擎>部署LeanCloud云引擎</h3><p>登陆你的LeanCloud账号，进入你的应用，选择：<code>云引擎 -> 部署 -> Git部署</code>，然后输入下面的仓库地址：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>https://github.com/lewky/valine-admin-custom.git
</code></pre></td></tr></table></div></div><p>然后点击部署按钮，等待云引擎将上面的仓库代码克隆下来。接下来需要设置环境变量。</p><h3 id=设置环境变量>设置环境变量</h3><p>点击<code>云引擎 -> 设置</code>，选择添加新变量，将下列变量一一加入。</p><table><thead><tr><th>变量</th><th>示例</th><th>说明</th></tr></thead><tbody><tr><td>SITE_NAME</td><td>xxx</td><td>[必填] 网站名称</td></tr><tr><td>SITE_URL</td><td><a href=https://xxx.com>https://xxx.com</a></td><td>[必填] 网站首页地址，地址末尾不要加/</td></tr><tr><td>SMTP_USER</td><td><a href=mailto:xxxxxx@qq.com>xxxxxx@qq.com</a></td><td>[必填] SMTP登录用户，一般为邮箱地址</td></tr><tr><td>SMTP_PASS</td><td>ccxxxxxxxxch</td><td>[必填] SMTP授权码，不是邮箱的登陆密码，请自行查询对应邮件服务商授权码的获取方式</td></tr><tr><td>SMTP_SERVICE</td><td>QQ</td><td>[必填] 邮件服务提供商，支持 QQ、163、126、Gmail 以及 <a href=https://nodemailer.com/smtp/well-known/#supported-services target=_blank rel="noopener noreffer">更多</a></td></tr><tr><td>SENDER_NAME</td><td>xxx</td><td>[必填] 发件人</td></tr><tr><td>SENDER_EMAIL</td><td><a href=mailto:xxxxxx@qq.com>xxxxxx@qq.com</a></td><td>[必填] 发件邮箱</td></tr><tr><td>ADMIN_URL</td><td><a href=https://xxx.leanapp.cn/>https://xxx.leanapp.cn/</a></td><td>[建议] Web主机二级域名（云引擎域名），用于自动唤醒</td></tr><tr><td>BLOGGER_EMAIL</td><td><a href=mailto:xxxxx@gmail.com>xxxxx@gmail.com</a></td><td>[可选] 博主通知收件地址，默认使用SENDER_EMAIL</td></tr><tr><td>AKISMET_KEY</td><td>xxxxxxxx</td><td>[可选] Akismet Key 用于垃圾评论检测，设为MANUAL_REVIEW开启人工审核，留空不使用反垃圾</td></tr><tr><td>TEMPLATE_NAME</td><td>default</td><td>[可选] 设置提醒邮件主题，目前内置了多款主题：default、rainbow、custom1、custom2</td></tr><tr><td>COMMENT</td><td>#post-comment</td><td>[可选] 评论 div 的 ID 名，直接跳转到评论位置</td></tr></tbody></table><p>设置好变量后，需要重启实例。在部署页面点击重启按钮即可，每次更改变量后都需要重启才能生效。如果对应的Git仓库代码发生变更，需要清除部署，重新克隆代码才能生效。</p><h3 id=后台评论管理>后台评论管理</h3><p>首先需要设置管理员信息。在部署云引擎成功后，访问管理员注册页面https://云引擎域名/sign-up，注册管理员登录信息，如：https://cloud.lewky.cn/sign-up</p><p>注册成功后可以在<code>存储 -> 结构化数据 -> _User</code>里看到多出来一条数据，正是刚刚我们注册成功的用户。</p><blockquote><p>注：使用原版Valine如果遇到注册页面不显示直接跳转至登录页的情况，请手动删除_User表中的全部数据。</p></blockquote><p>注册成功后，就可以通过这个注册的用户访问后台评论管理页面：https://云引擎域名</p><h3 id=配置qq提醒>配置QQ提醒</h3><ol><li>前往<a href=https://qmsg.zendee.cn/ target=_blank rel="noopener noreffer">Qmsg酱官网</a>，点击管理台登陆账号，选择其中任意一个你想使用的Qmsg酱(QQ机器人)，并加其为QQ好友</li><li>点击菜单栏里<code>Qmsg酱</code>旁边的<code>QQ号码</code>，添加你想要接收信息推送的QQ号码</li><li>点击</li><li>菜单栏里的<code>KEY</code>，这里有一串字符串等下要添加到LeanCloud的环境变量里</li></ol><p>官网里提供了所有的接口文档，你可以先行通过一个简单的测试来验证你的QQ能不能接收到推送，如下：</p><ol><li>在浏览器新打开一个页面，在地址栏里输入<code>https://qmsg.zendee.cn/send/</code>，然后把你管理台里的<code>KEY</code>添加到地址栏末尾，然后在末尾继续加上<code>?msg=test</code>，接着按下回车键，这里表示让Qmsg酱发送<code>test</code>给你的QQ号码</li><li>如果发送成功，你会发现浏览器页面内容变成：</li></ol><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{&#34;success&#34;:true,&#34;reason&#34;:&#34;操作成功&#34;,&#34;code&#34;:0,&#34;info&#34;:{}}
</code></pre></td></tr></table></div></div><ol start=3><li>与此同时，你的QQ号码会收到你加的那个<code>Qmsg酱</code>QQ好友的消息。这表明推送正常，可以往下走了。</li></ol><p>前面我们已经在LeanCloud云引擎里配置了一部分必须的环境变量，为了使用QQ提醒功能，还想要额外配置两个变量：</p><table><thead><tr><th>变量</th><th>示例</th><th>说明</th></tr></thead><tbody><tr><td>QMSG_KEY</td><td>xxxxxxx</td><td>[必填] Qmsg酱的KEY</td></tr><tr><td>QQ</td><td>xxxxxxx</td><td>[必填] Qmsg酱发送的 qq，支持多个，用英文逗号分隔即可</td></tr></tbody></table><h3 id=解决云引擎休眠>解决云引擎休眠</h3><p>LeanCloud云引擎有自动休眠机制，这是官方的说法：<a href=https://leancloud.cn/docs/leanengine_plan.html#hash633315134 target=_blank rel="noopener noreffer">点击查看</a></p><p>目前实现了两种云函数定时任务来解决云引擎休眠的问题：</p><ul><li>自动唤醒，定时访问Web APP二级域名防止云引擎休眠；</li><li>每天定时检查过去24小时内漏发的邮件通知。</li></ul><p>进入<code>云引擎 -> 定时任务</code>，创建两个定时任务：</p><ol><li>选择self-wake云函数，Cron表达式为<code>0 */25 7-23 * * ?</code>，表示每天早7点到晚12点每隔25分钟访问云引擎。</li><li>选择resend-mails云函数，Cron表达式为<code>0 10 7 * * ?</code>，表示每天7点10分检查过去24小时内漏发的通知邮件并补发。</li></ol><p>云引擎还有个国际版的，要注意表达式的时区问题，不过表达式填写后会显示每天几点操作，应该不会有人填错吧。</p><h2 id=解决免费版云引擎流控问题>解决免费版云引擎流控问题</h2><p>免费版云引擎会在达到最大启动时长限制（好像是持续运行18个小时），进入强制休眠状态。在休眠状态时无法通过我们定义的自动唤醒函数来自动重启，可以在日志里看到报错如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{&#34;error&#34;:&#34;因流控原因，通过定时任务唤醒体验版实例失败，建议升级至标准版云引擎实例避免休眠 https://url.leanapp.cn/dwAEksv&#34;}
</code></pre></td></tr></table></div></div><p>但是如果在休眠期间，云引擎又受到外界的一次访问，就可以再次激活进入启动状态，这时候就可以通过自动唤醒函数来每隔半小时自我唤醒一次了。也就是说，当云引擎进入强制休眠状态后，我们通过外部的定时任务，来每天定时访问云引擎绑定好的域名（<strong>也就是你的后台评论管理页面地址</strong>），就可以继续白嫖了。</p><p>那么去那里弄免费的外部定时任务呢？实现方案有不少，比如：</p><h3 id=方案一github--actions>方案一：<code>GitHub + Actions</code></h3><p>借助<code>GitHub + Actions</code>，自动部署也是用这种方案，不过这种方案有个缺点，就是每次执行action都会生成一次对应的commit，对我来说不是理想方案，这里就不介绍了。有兴趣的可以参考<a href=https://www.antmoe.com/posts/ff6aef7b#%e5%bc%80%e5%a7%8b%e5%b0%9d%e8%af%95 target=_blank rel="noopener noreffer">这篇文章</a></p><h3 id=方案二借助国内其他的免费云函数或定时任务>方案二：借助国内其他的免费云函数或定时任务</h3><p>利用国内的云函数，自己写一个脚本。然后定时监控即可。或者宝塔、自己服务器的定时任务都是可以的。说穿了，就是用其他的类似于LeanCloud云引擎类似的免费容器的云函数或者定时任务来唤醒LeanCloud的云引擎，那如果其他的免费容器也有类似的强制休眠机制怎么办呢？</p><p>很简单，互相套娃即可。让一个免费的容器A通过定时任务在非休眠期间去唤醒另一个强制休眠中的容器B，如果容器A强制休眠了就让另一个非休眠的容器B去唤醒。只要两个免费容器的强制休眠时间错开即可完成这一白嫖循环<code>O(∩_∩)O~</code></p><h3 id=方案三cloudflare的workers>方案三：<code>cloudflare</code>的<code>Workers</code></h3><p><code>cloudflare</code>的<code>Workers</code>可以在线定义脚本，通过链接即可触发脚本，具体做法请参考<a href=https://www.antmoe.com/posts/ff6aef7b#%e6%96%b9%e6%a1%88%e4%b8%89 target=_blank rel="noopener noreffer">这篇文章</a></p><h3 id=方案四借助cron-job平台进行每日定时唤醒>方案四：借助<code>cron-job</code>平台进行每日定时唤醒</h3><p>通过<code>cron-job</code>平台进行监控，这是<a href=https://cron-job.org/en/signup/ target=_blank rel="noopener noreffer">注册地址</a></p><p>本人使用的方案四，该方案其实和方案二是一回事。这里简单介绍下怎么用，注册该平台可能需要<code>tī zi</code>，请自行解决。</p><ul><li>注册时，<code>Time zone</code>（也就是时区）请选择<code>Asia/Shanghai</code>，否则后续在定义cron表达式时需要自己换算时区时间。如果注册页面最下面的谷歌人机验证出不来，你懂的，请自行解决。</li><li>注册后需要登录邮箱通过邮件激活账号，没收到邮件的请检查你的垃圾箱，邮件可能在垃圾箱里。</li><li>激活账号后登录你的账号，访问这个地址：https://cron-job.org/en/members/jobs/</li><li>点击页面上的<code>Create cronjob</code>按钮，创建你的定时任务，各个必填配置项如下表：</li></ul><table><thead><tr><th>变量</th><th>示例</th><th>说明</th></tr></thead><tbody><tr><td>Title</td><td>xxx</td><td>定时任务名称</td></tr><tr><td>Address</td><td><a href=https://xxx.com>https://xxx.com</a></td><td>访问的地址，请填写LeanCloud云引擎绑定的域名地址，也就是那个后台评论管理页面地址<code>https://云引擎域名</code></td></tr><tr><td>Schedule</td><td>按需选择</td><td>定时任务的执行时间和频率，这里建议使用第二种：<code>Every day at 6 : 50 </code>。具体每天几点执行请自行决定。</td></tr><tr><td>Notifications</td><td>按需选择</td><td>执行失败时的通知提醒</td></tr><tr><td>Save responses</td><td>按需选择</td><td>保存执行定时任务的日志</td></tr></tbody></table><h2 id=使用waline替代valine评论系统>使用Waline替代Valine评论系统</h2><p>鉴于Valine的安全问题，以及LeanCloud云引擎的限流问题，改用Waline + Vercel来作为评论系统，Waline是基于Valine进行开发的，所以迁移成本较低。这是Waline的<a href=https://waline.js.org/ target=_blank rel="noopener noreffer">官方文档</a>，有很详细的配置、迁移等教程。</p><p>由于LoveIt主题没有引入Waline，所以这里记录下如何引入Waline，以及遇到的相关问题的解决方法。</p><h3 id=站点配置文件添加相关变量>站点配置文件添加相关变量</h3><p>打开站点配置文件，找到Valine相关变量<code>[params.page.comment.valine]</code>，在该节点下面添加Waline相关的变量 ：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>      # Waline comment config (https://waline.js.org/)
      # Waline 评论系统设置 (https://waline.js.org/)
      [params.page.comment.waline]
        enable = true
        #js = &#34;https://cdn.jsdelivr.net/npm/@waline/client@latest&#34;
        js = &#34;https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js&#34;
        meta = [&#39;nick&#39;,&#39;mail&#39;,&#39;link&#39;]                           # 评论者相关属性
        requiredMeta = [&#39;nick&#39;,&#39;mail&#39;]                        # 设置必填项，默认匿名
        login = &#34;force&#34;                                         # 评论必须先登录，用于防护恶意攻击
        placeholder = &#34;为防恶意灌水攻击，评论前需注册并登录，望见谅~&#34;     # 评论框占位提示符
        serverURL = &#34;&#34;                 # Waline的服务端地址（必填） 
        #imageHosting =                                         # 图床api，如果允许评论框上传图片
        uploadImage = false                                     # 评论上传图片功能
        avatar = &#34;retro&#34;                                        # Gravatar头像
        avatarCDN = &#34;https://sdn.geekzu.org/avatar/&#34;            # Gravatar头像CDN地址，不建议使用loli源
        pageSize = 20                                           # 评论列表分页，每页条数
        lang = &#34;zh-CN&#34;                                          # 多语言支持
        visitor = true                                          # 文章访问量统计
        highlight = true                                        # 代码高亮
</code></pre></td></tr></table></div></div><p>记得把原本的评论系统的<code>enable</code>设置为false，改用新加的Waline。</p><h3 id=修改commenthtml模板文件>修改comment.html模板文件</h3><p>将<code>\themes\LoveIt\layouts\partials\comment.html</code>拷贝到<code>\layouts\partials\comment.html</code>，打开拷贝后的文件，找到Valine相关的代码部分，然后在其下方添加Waline的代码，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>        {{- /* Waline Comment System */ -}}
        {{- $waline := $comment.waline | default dict -}}
        {{- if $waline.enable -}}
            &lt;div id=&#34;waline&#34;&gt;&lt;/div&gt;
			&lt;script src=&#39;{{ $waline.js }}&#39;&gt;&lt;/script&gt;

			&lt;script&gt;
		    	new Waline({
		    	  el: &#39;#waline&#39;,
				  meta: {{ $waline.meta }},
		    	  requiredMeta: {{ $waline.requiredMeta }},
		    	  login: {{ $waline.login }},
				  placeholder: {{ $waline.placeholder }},
		    	  serverURL: {{ $waline.serverURL }},
		    	  avatarCDN: {{ $waline.avatarCDN }},
		    	  pageSize: {{ $waline.pageSize }},
		    	  avatar: {{ $waline.avatar }},
		    	  lang: {{ $waline.lang }},
				  visitor: {{ $waline.visitor }},
				  highlight: {{ $waline.highlight }},
				  uploadImage: {{ $waline.uploadImage }}				  
		    	});
		    &lt;/script&gt;
        {{- end -}}
</code></pre></td></tr></table></div></div><p>Waline内置微博表情，如果想自定义表情包的，可以继续添加两个属性<code>emoji</code>到上面的代码里，具体做法可以参考<a href=https://waline.js.org/guide/client/emoji.html#%E9%A2%84%E8%AE%BE target=_blank rel="noopener noreffer">官方文档 - 自定义表情</a>。</p><p>这里顺便介绍下@小康大佬整理的一个很方便的表情包站点：<a href=https://emotion.xiaokang.me/ target=_blank rel="noopener noreffer">表情速查</a>，里面有很多类别的表情包，还有对应的快速引入语法链接，以及用于配置Valine、Waline等评论系统表情包映射的JSON！</p><p>这里还有一个专门爬取b站表情包的项目仓库：<a href=https://github.com/lrhtony/BiliEmoji target=_blank rel="noopener noreffer">lrhtony / BiliEmoji</a></p><h3 id=添加评论统计到文章元数据>添加评论统计到文章元数据</h3><p>将<code>/themes/LoveIt/layouts/posts/single.html</code>拷贝到<code>/layouts/posts/single.html</code>，打开拷贝后的文件，找到如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>            &lt;div class=&#34;post-meta-line&#34;&gt;
                {{- with .Site.Params.dateformat | default &#34;2006-01-02&#34; | .PublishDate.Format -}}
                    &lt;i class=&#34;far fa-calendar-alt fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;time datetime=&#34;{{ . }}&#34;&gt;{{ . }}&lt;/time&gt;&amp;nbsp;
                {{- end -}}
                &lt;i class=&#34;fas fa-pencil-alt fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ T &#34;wordCount&#34; .WordCount }}&amp;nbsp;
                &lt;i class=&#34;far fa-clock fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ T &#34;readingTime&#34; .ReadingTime }}&amp;nbsp;
                {{- $comment := .Scratch.Get &#34;comment&#34; | default dict -}}
                {{- if $comment.enable | and $comment.valine.enable | and $comment.valine.visitor -}}
                    &lt;span id=&#34;{{ .RelPermalink }}&#34; class=&#34;leancloud_visitors&#34; data-flag-title=&#34;{{ .Title }}&#34;&gt;
                        &lt;i class=&#34;far fa-eye fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;span class=leancloud-visitors-count&gt;&lt;/span&gt;&amp;nbsp;{{ T &#34;views&#34; }}
                    &lt;/span&gt;&amp;nbsp;
                {{- end -}}
            &lt;/div&gt;
</code></pre></td></tr></table></div></div><p>将上面的代码改为如下代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>            &lt;div class=&#34;post-meta-line&#34;&gt;
                {{- with .Site.Params.dateformat | default &#34;2006-01-02&#34; | .PublishDate.Format -}}
                    &lt;i class=&#34;far fa-calendar-alt fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;time datetime=&#34;{{ . }}&#34;&gt;{{ . }}&lt;/time&gt;&amp;nbsp;
                {{- end -}}
                &lt;i class=&#34;fas fa-pencil-alt fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ T &#34;wordCount&#34; .WordCount }}
                &lt;i class=&#34;far fa-clock fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;{{ T &#34;readingTime&#34; .ReadingTime }}&amp;nbsp;
                {{- $comment := .Scratch.Get &#34;comment&#34; | default dict -}}
                {{- if $comment.enable | and $comment.valine.enable | and $comment.valine.visitor -}}
                    &lt;span id=&#34;{{ .RelPermalink }}&#34; class=&#34;leancloud_visitors&#34; data-flag-title=&#34;{{ .Title }}&#34;&gt;
                        &lt;i class=&#34;far fa-eye fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;span class=leancloud-visitors-count&gt;&lt;/span&gt;&amp;nbsp;{{ T &#34;views&#34; }}
                    &lt;/span&gt;&amp;nbsp;
                {{- end -}}
                {{- if $comment.enable | and $comment.waline.enable | and $comment.waline.visitor -}}
                    &lt;span id=&#34;{{ .RelPermalink }}&#34; class=&#34;leancloud_visitors&#34; data-flag-title=&#34;{{ .Title }}&#34;&gt;
                        &lt;i class=&#34;far fa-eye fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;span class=leancloud-visitors-count&gt;&lt;/span&gt;&amp;nbsp;{{ T &#34;views&#34; }}
                    &lt;/span&gt;&amp;nbsp;
					&lt;a href=&#34;#comments&#34; id=&#34;post-meta-vcount&#34; title=&#34;{{ T `viewComments` }}&#34;&gt;
						&lt;i class=&#34;fas fa-comment fa-fw&#34;&gt;&lt;/i&gt;&amp;nbsp;&lt;span id=&#34;{{ .RelPermalink }}&#34; class=&#34;waline-comment-count&#34;&gt;&lt;/span&gt;&amp;nbsp;条评论
					&lt;/a&gt;
                {{- end -}}
            &lt;/div&gt;
</code></pre></td></tr></table></div></div><h3 id=添加样式>添加样式</h3><p>在<code>_custom.scss</code>里添加如下样式：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=c>/* 文章元数据meta */</span>
<span class=p>.</span><span class=nc>post-meta</span> <span class=p>.</span><span class=nc>post-meta-line</span><span class=p>:</span><span class=nd>nth-child</span><span class=o>(</span><span class=nt>2</span><span class=o>)</span> <span class=nt>i</span><span class=p>:</span><span class=nd>nth-child</span><span class=o>(</span><span class=nt>1</span><span class=o>)</span> <span class=p>{</span>
    <span class=k>margin-left</span><span class=p>:</span> <span class=mi>0</span><span class=p>;</span>
<span class=p>}</span>
<span class=p>.</span><span class=nc>post-meta</span> <span class=p>.</span><span class=nc>post-meta-line</span><span class=p>:</span><span class=nd>nth-child</span><span class=o>(</span><span class=nt>2</span><span class=o>)</span> <span class=nt>i</span> <span class=p>{</span>
    <span class=k>margin-left</span><span class=p>:</span> <span class=mf>0.3</span><span class=kt>rem</span><span class=p>;</span>
<span class=p>}</span>
<span class=p>.</span><span class=nc>post-meta</span> <span class=p>.</span><span class=nc>post-meta-line</span><span class=p>:</span><span class=nd>nth-child</span><span class=o>(</span><span class=nt>2</span><span class=o>)</span> <span class=nt>span</span> <span class=nt>i</span> <span class=p>{</span>
    <span class=k>margin-left</span><span class=p>:</span> <span class=mf>0.3</span><span class=kt>rem</span> <span class=cp>!important</span><span class=p>;</span>
<span class=p>}</span>
<span class=p>.</span><span class=nc>post-meta</span> <span class=nt>a</span><span class=p>#</span><span class=nn>post-meta-vcount</span> <span class=p>{</span>
    <span class=k>color</span><span class=p>:</span> <span class=mh>#a9a9b3</span><span class=p>;</span>
    <span class=err>&amp;:hover</span> <span class=err>{</span>
        <span class=k>color</span><span class=p>:</span> <span class=mh>#2d96bd</span><span class=p>;</span>
    <span class=p>}</span>
<span class=err>}</span>
</code></pre></td></tr></table></div></div><h3 id=部署到vercel>部署到Vercel</h3><p>这个部分直接参考<a href=https://waline.js.org/quick-start.html#vercel-%E9%83%A8%E7%BD%B2 target=_blank rel="noopener noreffer">官方文档 - Vercel 部署</a>。实际上就是在GitHub上帮你创建了一个仓库，仓库里只有简单的几个文件，用于Vercel的部署。Vercel那边会和刚刚创建的GitHub仓库关联，然后部署到Vercel自己的服务器。</p><p>这里有个坑，之前用Valine的时候只需要用到LeanCloud的两个变量<code>APP ID</code>和<code>APP KEY</code>。但是对于Waline，必须要再用到第三个变量<code>Master Key</code>。也就是说，<strong>对于Waline + Vercel，必须配置三个变量<code>LEAN_ID</code>、<code>LEAN_KEY</code>和<code>LEAN_MASTER_KEY</code>才能算部署成功。</strong></p><p>否则你会发现就算Vercel显示部署成功，一旦访问部署页面却会发现页面一片空白，具体可参考GitHub上的一个issue：<a href=https://github.com/lizheming/waline/issues/82 target=_blank rel="noopener noreffer">Vercel初始化后打开网址页面内容为空 #82</a></p><p>Waline还带有简单的后台，可以实现对评论的管理。部署完成后访问<code>&lt;serverURL>/ui/register</code>进行注册，第一个注册的你会被设定成管理员。登录成功后就可以看到评论管理的界面了，大家可以收藏该地址方便后续使用。<code>serverURL</code>就是Vercel部署成功后提供给你的那几个访问域名。</p><p>如果原本使用的是Valine + LeanCloud云引擎，在改用Waline + Vercel后记得把LeanCloud云引擎的部署清除掉。</p><h3 id=使用评论通知功能>使用评论通知功能</h3><p>Waline支持邮件、微信、QQ通知，想要使用通知功能，需要在Vercel那边配置环境变量。具体可参考<a href=https://waline.js.org/server/notification.html#%E8%AF%84%E8%AE%BA%E9%80%9A%E7%9F%A5 target=_blank rel="noopener noreffer">官方文档 - 评论通知</a>。这些环境变量名字和Valine的配置是一样的，貌似只有QQ通知相关的一个变量名字不一样而已。</p><p>Vercel配置环境变量步骤：</p><ol><li>打开你在Vercel上创建的项目</li><li>点击<code>Settings</code> -> <code>Environment Variables</code> -> 选择添加<code>Plaintext</code>类型的环境变量 -> 输入环境变量的<code>name</code>和<code>value</code> -> 点击<code>Save</code></li></ol><p>所有被添加的环境变量可以在下方看到，可以删除或修改已定义的环境变量。</p><h3 id=waline--vercel的使用体验>Waline + Vercel的使用体验</h3><ul><li>由于使用了LeanCloud作为存储，外加使用了反垃圾评论服务Akismet，所以在提交评论时会比较慢，大概需要等待个两三秒。这个耗时见仁见智，一方面确实慢，一方面可以有效避免被人恶意评论攻击。</li><li>据说部署在CloudBase的速度还行。</li><li>Waline的机制好像是QQ提醒了邮件就不提醒，所以对于新评论，如果设置了QQ提醒就不会再收到邮件通知。对于回复的评论则是可以同时收到。</li><li>Waline提供了一个很棒的后台管理，还支持其他人的注册和登陆。</li></ul><h2 id=添加百度统计>添加百度统计</h2><p>默认的统计功能只有<code>Google Analytics</code>和<code>Fathom Analytics</code>两种，想要使用百度统计需要自行修改配置文件和模板文件。</p><h3 id=添加百度统计相关变量>添加百度统计相关变量</h3><p>在站点配置文件里找到统计相关的配置，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-toml data-lang=toml>  <span class=c># Analytics config</span>
  <span class=c># 网站分析配置</span>
  <span class=p>[</span><span class=nx>params</span><span class=p>.</span><span class=nx>analytics</span><span class=p>]</span>
    <span class=nx>enable</span> <span class=p>=</span> <span class=nx>flase</span>
    <span class=c># Google Analytics</span>
    <span class=p>[</span><span class=nx>params</span><span class=p>.</span><span class=nx>analytics</span><span class=p>.</span><span class=nx>google</span><span class=p>]</span>
      <span class=nx>id</span> <span class=p>=</span> <span class=s2>&#34;&#34;</span>
      <span class=c># whether to anonymize IP</span>
      <span class=c># 是否匿名化用户 IP</span>
      <span class=nx>anonymizeIP</span> <span class=p>=</span> <span class=kc>true</span>
    <span class=c># Fathom Analytics</span>
    <span class=p>[</span><span class=nx>params</span><span class=p>.</span><span class=nx>analytics</span><span class=p>.</span><span class=nx>fathom</span><span class=p>]</span>
      <span class=nx>id</span> <span class=p>=</span> <span class=s2>&#34;&#34;</span>
      <span class=c># server url for your tracker if you&#39;re self hosting</span>
      <span class=c># 自行托管追踪器时的主机路径</span>
      <span class=nx>server</span> <span class=p>=</span> <span class=s2>&#34;&#34;</span>
</code></pre></td></tr></table></div></div><p>在这里的<code>[params.analytics.fathom]</code>后面添加一个新的变量给百度统计使用：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-toml data-lang=toml>    <span class=c># Baidu Analytics</span>
    <span class=c># 百度统计</span>
    <span class=p>[</span><span class=nx>params</span><span class=p>.</span><span class=nx>analytics</span><span class=p>.</span><span class=nx>baidu</span><span class=p>]</span>
      <span class=nx>id</span> <span class=p>=</span> <span class=s2>&#34;&#34;</span>
</code></pre></td></tr></table></div></div><h3 id=将百度统计的脚本代码添加到analyticshtml里>将百度统计的脚本代码添加到analytics.html里</h3><p>首先拷贝<code>\themes\LoveIt\layouts\partials\plugin\analytics.html</code>到<code>\layouts\partials\plugin\analytics.html</code>。</p><p>打开拷贝后的analytics.html文件，在<code>Fathom Analytics</code>的代码下面加上如下内容：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html>	{{- /* Baidu Analytics */ -}}
    {{- with $analytics.baidu.id -}}
		<span class=p>&lt;</span><span class=nt>script</span><span class=p>&gt;</span>
			<span class=kd>var</span> <span class=nx>_hmt</span> <span class=o>=</span> <span class=nx>_hmt</span> <span class=o>||</span> <span class=p>[];</span>
			<span class=p>(</span><span class=kd>function</span><span class=p>()</span> <span class=p>{</span>
			  <span class=kd>var</span> <span class=nx>hm</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>createElement</span><span class=p>(</span><span class=s2>&#34;script&#34;</span><span class=p>);</span>
			  <span class=nx>hm</span><span class=p>.</span><span class=nx>src</span> <span class=o>=</span> <span class=s2>&#34;https://hm.baidu.com/hm.js?{{ . }}&#34;</span><span class=p>;</span>
			  <span class=kd>var</span> <span class=nx>s</span> <span class=o>=</span> <span class=nb>document</span><span class=p>.</span><span class=nx>getElementsByTagName</span><span class=p>(</span><span class=s2>&#34;script&#34;</span><span class=p>)[</span><span class=mi>0</span><span class=p>];</span> 
			  <span class=nx>s</span><span class=p>.</span><span class=nx>parentNode</span><span class=p>.</span><span class=nx>insertBefore</span><span class=p>(</span><span class=nx>hm</span><span class=p>,</span> <span class=nx>s</span><span class=p>);</span>
			<span class=p>})();</span>
		<span class=p>&lt;/</span><span class=nt>script</span><span class=p>&gt;</span>
	{{- end -}}
</code></pre></td></tr></table></div></div><h3 id=启用百度统计>启用百度统计</h3><p>将统计功能的<code>enable = flase</code>改为<code>enable = true</code>。在新增的百度统计变量的<code>id</code>那里填上你的百度统计id值，也就是百度统计的脚本代码里<code>https://hm.baidu.com/hm.js?</code>后面跟着的那串很长的东东。如果不知道怎么查看这个百度统计id，请自行百度。</p><h2 id=添加鼠标右键菜单>添加鼠标右键菜单</h2><h3 id=添加右键菜单的变量>添加右键菜单的变量</h3><p>打开站点配置文件，添加如下变量，可以自行定制菜单里的按钮，包括数量、名称、图片和地址：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>  # Right click menu
  # 右键菜单
  [params.rightmenu]
    enable = true  # true or false  是否开启右键
    audio = false  # true or false 是否开启点击音乐
    [[params.rightmenu.layout]]
      # 按钮名称
      name = &#34;首页&#34;
      # 背景图片
      image = &#34;/images/rightmenu/rightmenu1.jpg&#34;
      # 跳转地址
      url = &#34;/&#34;
    [[params.rightmenu.layout]]
      name = &#34;音乐游戏&#34;
      image = &#34;/images/rightmenu/rightmenu2.jpg&#34;
      url = &#34;/funny/mikutap/&#34;
    [[params.rightmenu.layout]]
      name = &#34;前方高能&#34;
      image = &#34;/images/rightmenu/rightmenu3.jpg&#34;
      url = &#34;/funny/high/&#34;
    [[params.rightmenu.layout]]
      name = &#34;建站日志&#34;
      image = &#34;/images/rightmenu/rightmenu4.jpg&#34;
      url = &#34;/posts/e62c38c4.html&#34;
    [[params.rightmenu.layout]]
      name = &#34;随笔&#34;
      image = &#34;/images/rightmenu/rightmenu5.jpg&#34;
      url = &#34;/posts/d65a1577.html&#34;
    [[params.rightmenu.layout]]
      name = &#34;友链&#34;
      image = &#34;/images/rightmenu/rightmenu6.jpg&#34;
      url = &#34;/friends/&#34;
</code></pre></td></tr></table></div></div><p>如果你有图床的话，还可以额外增加一个图床变量，这样可以去图床加载你的图片，可以参考前文的<a href=http://localhost:1313/posts/hugo-3.html/#%E6%B7%BB%E5%8A%A0%E5%85%A8%E5%B1%80cdn%E5%8F%98%E9%87%8F target=_blank rel="noopener noreffer">添加全局cdn变量</a>。</p><h3 id=添加rightmenuhtml文件>添加<code>rightmenu.html</code>文件</h3><p>新建一个<code>layouts/partials/plugin/rightmenu.html</code>文件，内容如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span><span class=lnt>39
</span><span class=lnt>40
</span><span class=lnt>41
</span><span class=lnt>42
</span><span class=lnt>43
</span><span class=lnt>44
</span><span class=lnt>45
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- $rightmenu := .Site.Params.rightmenu -}}
{{- $cdn := .Site.Params.cdnPrefix -}}
{{- if $rightmenu.enable -}}
   	&lt;div class=&#34;GalMenu GalDropDown&#34;&gt;
	      &lt;div class=&#34;circle&#34; id=&#34;gal&#34;&gt;
	        &lt;div class=&#34;ring&#34;&gt;
			{{- range $item := $rightmenu.layout -}}
			{{- $defaultURL := &#34;/&#34; -}}
			{{- $defaultName := &#34;Home&#34; -}}
			{{- $defaultImage := &#34;https://gravatar.loli.net/avatar/c02f8b813aa4b7f72e32de5a48dc17a7?d=retro&amp;v=1.4.14&#34; -}}
	          &lt;a href=&#34;{{- $item.url | default $defaultURL -}}&#34; 
			  target=&#34;_blank&#34; 
			{{- $itemImage := $item.image | default $defaultImage -}}
			{{- if strings.HasPrefix $item.image &#34;http&#34; -}}
			  style=&#34;background-image:url({{- $itemImage -}});&#34; 
			{{- else if strings.HasPrefix $item.image &#34;/&#34; -}}
			  style=&#34;background-image:url({{- $cdn -}}{{- $itemImage -}});&#34; 
			{{- else -}}
			  style=&#34;background-image:url({{- $itemImage -}});&#34; 
			{{- end -}}
			  class=&#34;menuItem&#34;&gt;{{- $item.name | default $defaultName -}}&lt;/a&gt;
			{{- end -}}
			&lt;/div&gt;
			{{- if $rightmenu.audio -}}
				&lt;audio id=&#34;audio&#34; src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/audio/niconiconi.mp3&#34;&gt;&lt;/audio&gt;
	        {{- end -}}
		  &lt;/div&gt;
	&lt;/div&gt;
	&lt;script type=&#34;text/javascript&#34;&gt;
	var items = document.querySelectorAll(&#39;.menuItem&#39;); 
	for (var i = 0, l = items.length; i &lt; l; i++) {
        items[i].style.left = (50 - 35 * Math.cos( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + &#34;%&#34;;
        items[i].style.top = (50 + 35 * Math.sin( - 0.5 * Math.PI - 2 * (1 / l) * i * Math.PI)).toFixed(4) + &#34;%&#34;
      }
	&lt;/script&gt;
	&lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/css/GalMenu.css&#34;&gt;
	&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/js/GalMenu.js&#34;&gt;&lt;/script&gt;
	&lt;script type=&#34;text/javascript&#34;&gt;
    	$(document).ready(function() {
        $(&#39;body&#39;).GalMenu({
          &#39;menu&#39;: &#39;GalDropDown&#39;
        })
      });
	&lt;/script&gt;
{{- end -}}
</code></pre></td></tr></table></div></div><p>这个模板代码里使用到了我项目里的<code>niconiconi.mp3</code>、<code>GalMenu.css</code>、<code>GalMenu.js</code>这三个文件，有兴趣的可以自己把文件保存到自己网站里，mp3文件可以自己修改为其他的音频文件。</p><h3 id=修改assetshtml文件>修改<code>assets.html</code>文件</h3><p>将主题的<code>\themes\LoveIt\layouts\partials\assets.html</code>拷贝一份到<code>\layouts\partials\assets.html</code>，在<code>{{- partial "plugin/analytics.html" . -}}</code>下添加如下内容：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- /* 右键菜单 */ -}}
&lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js&#34;&gt;&lt;/script&gt;
{{- partial &#34;plugin/rightmenu.html&#34; . -}}
</code></pre></td></tr></table></div></div><p>搞定，这个功能就完成了。</p><h2 id=添加文章加密功能>添加文章加密功能</h2><p>将<code>\themes\LoveIt\layouts\posts\single.html</code>拷贝到<code>\layouts\posts\single.html</code>，打开拷贝后的文件，在<code>{{- $params := .Scratch.Get "params" -}}</code>的下一行添加如下代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>    {{- $password := $params.password | default &#34;&#34; -}}
    {{- if ne $password &#34;&#34; -}}
		&lt;script&gt;
			(function(){
				if({{ $password }}){
					if (prompt(&#39;请输入文章密码&#39;) != {{ $password }}){
						alert(&#39;密码错误！&#39;);
						if (history.length === 1) {
							window.opener = null;
							window.open(&#39;&#39;, &#39;_self&#39;);
							window.close();
						} else {
							history.back();
						}
					}
				}
			})();
		&lt;/script&gt;
    {{- end -}}
</code></pre></td></tr></table></div></div><p>之后只要在文章的头部加上<code>password</code>属性即可进行加密，只有输入了正确密码才能打开文章，否则会回退到之前的页面。用法如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>---
title: 随笔
password: test
---
</code></pre></td></tr></table></div></div><h2 id=添加github-corner>添加GitHub Corner</h2><p>将<code>\themes\LoveIt\layouts\partials\header.html</code>拷贝到<code>\layouts\partials\header.html</code>，打开拷贝后的文件，在<code>&lt;div class="header-wrapper"></code>的下一行添加一个超链代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-html data-lang=html><span class=p>&lt;</span><span class=nt>a</span> <span class=na>href</span><span class=o>=</span><span class=s>&#34;https://github.com/lewky&#34;</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;github-corner&#34;</span> <span class=na>target</span><span class=o>=</span><span class=s>&#34;_blank&#34;</span> <span class=na>title</span><span class=o>=</span><span class=s>&#34;Follow me on GitHub&#34;</span> <span class=na>aria-label</span><span class=o>=</span><span class=s>&#34;Follow me on GitHub&#34;</span><span class=p>&gt;&lt;</span><span class=nt>svg</span> <span class=na>width</span><span class=o>=</span><span class=s>&#34;3.5rem&#34;</span> <span class=na>height</span><span class=o>=</span><span class=s>&#34;3.5rem&#34;</span> <span class=na>viewBox</span><span class=o>=</span><span class=s>&#34;0 0 250 250&#34;</span> <span class=na>style</span><span class=o>=</span><span class=s>&#34;fill:#70B7FD; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);&#34;</span> <span class=na>aria-hidden</span><span class=o>=</span><span class=s>&#34;true&#34;</span><span class=p>&gt;&lt;</span><span class=nt>path</span> <span class=na>d</span><span class=o>=</span><span class=s>&#34;M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z&#34;</span><span class=p>&gt;&lt;/</span><span class=nt>path</span><span class=p>&gt;&lt;</span><span class=nt>path</span> <span class=na>d</span><span class=o>=</span><span class=s>&#34;M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2&#34;</span> <span class=na>fill</span><span class=o>=</span><span class=s>&#34;currentColor&#34;</span> <span class=na>style</span><span class=o>=</span><span class=s>&#34;transform-origin: 130px 106px;&#34;</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;octo-arm&#34;</span><span class=p>&gt;&lt;/</span><span class=nt>path</span><span class=p>&gt;&lt;</span><span class=nt>path</span> <span class=na>d</span><span class=o>=</span><span class=s>&#34;M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z&#34;</span> <span class=na>fill</span><span class=o>=</span><span class=s>&#34;currentColor&#34;</span> <span class=na>class</span><span class=o>=</span><span class=s>&#34;octo-body&#34;</span><span class=p>&gt;&lt;/</span><span class=nt>path</span><span class=p>&gt;&lt;/</span><span class=nt>svg</span><span class=p>&gt;&lt;/</span><span class=nt>a</span><span class=p>&gt;</span>
</code></pre></td></tr></table></div></div><p>将上边的超链的href改为自己的GitHub地址，如果想调整图片大小，可以修改代码里的<code>svg</code>标签的<code>width</code>和<code>height</code>属性。</p><p>然后是添加样式代码到<code>_custom.scss</code>里：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=c>/* Github Corner */</span>
<span class=p>.</span><span class=nc>github-corner</span><span class=p>:</span><span class=nd>hover</span> <span class=p>.</span><span class=nc>octo-arm</span> <span class=p>{</span>
	<span class=k>animation</span><span class=p>:</span> <span class=n>octocat-wave</span> <span class=mi>560</span><span class=kt>ms</span> <span class=kc>ease</span><span class=o>-</span><span class=n>in-out</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>keyframes</span> <span class=nt>octocat-wave</span> <span class=p>{</span>
	<span class=nt>0</span><span class=o>%,</span><span class=nt>100</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>0</span><span class=p>)</span>
	<span class=p>}</span>

	<span class=nt>20</span><span class=o>%,</span><span class=nt>60</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>-25</span><span class=kt>deg</span><span class=p>)</span>
	<span class=p>}</span>

	<span class=nt>40</span><span class=o>%,</span><span class=nt>80</span><span class=o>%</span> <span class=p>{</span>
		<span class=k>transform</span><span class=p>:</span> <span class=nb>rotate</span><span class=p>(</span><span class=mi>10</span><span class=kt>deg</span><span class=p>)</span>
	<span class=p>}</span>
<span class=p>}</span>

<span class=p>@</span><span class=k>media</span> <span class=o>(</span><span class=nt>max-width</span><span class=p>:</span><span class=nd>500px</span><span class=o>)</span> <span class=p>{</span>
	<span class=p>.</span><span class=nc>github-corner</span><span class=p>:</span><span class=nd>hover</span> <span class=p>.</span><span class=nc>octo-arm</span> <span class=p>{</span>
		<span class=k>animation</span><span class=p>:</span> <span class=kc>none</span>
	<span class=p>}</span>

	<span class=p>.</span><span class=nc>github-corner</span> <span class=p>.</span><span class=nc>octo-arm</span> <span class=p>{</span>
		<span class=k>animation</span><span class=p>:</span> <span class=n>octocat-wave</span> <span class=mi>560</span><span class=kt>ms</span> <span class=kc>ease</span><span class=o>-</span><span class=n>in-out</span>
	<span class=p>}</span>
<span class=p>}</span>
</code></pre></td></tr></table></div></div><p>下面是GitHub Corner的项目地址，一共有10种颜色样式，随便挑！</p><ul><li><a href=https://tholman.com/github-corners/ target=_blank rel="noopener noreffer">GitHub Corners项目地址</a></li></ul><h2 id=页面下方添加拉姆雷姆快捷跳转>页面下方添加拉姆雷姆快捷跳转</h2><p>将<code>\themes\LoveIt\layouts\_default\baseof.html</code>拷贝到<code>\layouts\_default\baseof.html</code>，打开拷贝后的<code>baseof.html</code>，在<code>{{- /* Load JavaScript scripts and CSS */ -}}</code>的上面一行添加如下代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>&lt;div class=&#34;sidebar_wo&#34;&gt;
  &lt;div id=&#34;leimu&#34;&gt;
	&lt;img src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png&#34; alt=&#34;雷姆&#34; 
	onmouseover=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuB.png&#39;&#34; 
	onmouseout=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png&#39;&#34; title=&#34;回到顶部&#34;&gt;
  &lt;/div&gt;
  &lt;div class=&#34;sidebar_wo&#34; id=&#34;lamu&#34;&gt;
	&lt;img src=&#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png&#34; alt=&#34;雷姆&#34; 
	onmouseover=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuB.png&#39;&#34; 
	onmouseout=&#34;this.src=&#39;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png&#39;&#34; title=&#34;回到底部&#34;&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre></td></tr></table></div></div><p>在<code>_custom.scss</code>里添加对应的css代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=c>/* 拉姆蕾姆回到顶部或底部按钮 */</span>
<span class=p>.</span><span class=nc>sidebar_wo</span> <span class=p>{</span>
    <span class=k>position</span><span class=p>:</span><span class=kc>fixed</span><span class=p>;</span>
    <span class=k>line-height</span><span class=p>:</span><span class=mi>0</span><span class=p>;</span>
    <span class=k>bottom</span><span class=p>:</span><span class=mi>0</span><span class=p>;</span>
    <span class=k>z-index</span><span class=p>:</span><span class=mi>1000</span>
<span class=p>}</span>
<span class=p>#</span><span class=nn>leimu</span> <span class=p>{</span>
    <span class=k>left</span><span class=p>:</span><span class=mi>0</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=k>transition</span><span class=p>:</span><span class=kc>all</span> <span class=mf>.3</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>in-out</span><span class=p>;</span>
    <span class=k>transition</span><span class=p>:</span><span class=kc>all</span> <span class=mf>.3</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>in-out</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>-7</span><span class=kt>px</span><span class=p>,</span><span class=mi>7</span><span class=kt>px</span><span class=p>);</span>
    <span class=kp>-ms-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>-7</span><span class=kt>px</span><span class=p>,</span><span class=mi>7</span><span class=kt>px</span><span class=p>);</span>
    <span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>-7</span><span class=kt>px</span><span class=p>,</span><span class=mi>7</span><span class=kt>px</span><span class=p>)</span>
<span class=p>}</span>
<span class=p>#</span><span class=nn>lamu</span> <span class=p>{</span>
    <span class=kp>-webkit-</span><span class=k>transition</span><span class=p>:</span><span class=kc>all</span> <span class=mf>.3</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>in-out</span><span class=p>;</span><span class=k>transition</span><span class=p>:</span><span class=kc>all</span> <span class=mf>.3</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>in-out</span><span class=p>;</span>
    <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>7</span><span class=kt>px</span><span class=p>,</span><span class=mi>7</span><span class=kt>px</span><span class=p>);</span>
    <span class=kp>-ms-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>7</span><span class=kt>px</span><span class=p>,</span><span class=mi>7</span><span class=kt>px</span><span class=p>);</span>
    <span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>7</span><span class=kt>px</span><span class=p>,</span><span class=mi>7</span><span class=kt>px</span><span class=p>);</span>
    <span class=k>right</span><span class=p>:</span><span class=mi>0</span>
<span class=p>}</span>
<span class=p>#</span><span class=nn>leimu</span><span class=p>:</span><span class=nd>hover</span> <span class=p>{</span>
    <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=mi>0</span><span class=p>);</span>
    <span class=kp>-ms-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=mi>0</span><span class=p>);</span>
    <span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=mi>0</span><span class=p>)</span>
<span class=p>}</span>
<span class=p>#</span><span class=nn>lamu</span><span class=p>:</span><span class=nd>hover</span> <span class=p>{</span>
    <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=mi>0</span><span class=p>);</span>
    <span class=kp>-ms-</span><span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=mi>0</span><span class=p>);</span>
    <span class=k>transform</span><span class=p>:</span><span class=nb>translate</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=mi>0</span><span class=p>)</span>
<span class=p>}</span>
<span class=p>.</span><span class=nc>sidebar_wo</span> <span class=nt>img</span> <span class=p>{</span>
    <span class=k>cursor</span><span class=p>:</span><span class=kc>pointer</span><span class=p>;</span>
<span class=p>}</span>
<span class=p>@</span><span class=k>media</span> <span class=nt>only</span> <span class=nt>screen</span> <span class=nt>and</span> <span class=o>(</span><span class=nt>max-width</span><span class=p>:</span><span class=nd>1024px</span><span class=o>)</span> <span class=p>{</span>
    <span class=p>.</span><span class=nc>sidebar_wo</span><span class=p>{</span><span class=k>display</span><span class=p>:</span><span class=kc>none</span><span class=p>}</span>
<span class=p>}</span>
</code></pre></td></tr></table></div></div><p>最后在<code>custom.js</code>里添加如下代码，注意，要先引入<code>jquery</code>才有效果，具体细节请看前文：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>/* 拉姆蕾姆回到顶部或底部按钮 */
$(function() {
	$(&#34;#lamu img&#34;).eq(0).click(function() {
		$(&#34;html,body&#34;).animate({scrollTop:$(document).height()},800);
		return false;
	});
	$(&#34;#leimu img&#34;).eq(0).click(function() {
		$(&#34;html,body&#34;).animate({scrollTop:0},800);
		return false;
	});
});
</code></pre></td></tr></table></div></div><h2 id=添加首页头像挂件>添加首页头像挂件</h2><p>这个功能分为四个部分：</p><ul><li>首页头像的动画特效从浮动改为旋转，为了适配挂件还稍微缩小了头像大小</li><li>添加头像挂件（都是b站的挂件）</li><li>点击头像一定次数后随机刷新头像</li><li>加载首页时随机刷新头像（该功能可禁用）</li></ul><h3 id=修改站点配置文件>修改站点配置文件</h3><p>在站点配置文件里找到你配置首页头像的变量<code>avatarURL</code>，在其下方添加几个新的变量，内容如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>      [params.home.profile]
        enable = true
        # 主页显示头像的 URL
        avatarURL = &#34;/images/avatar.jpg&#34;
        # 是否启用头像挂件
        avatarPluginURL = &#34;/images/avatar-plug/png/bilibili_105.png&#34;
        # 是否启用头像挂件自动刷新
        avatarPluginFlush = true
        # 点击频率，点击几次就换挂件
        avatarPluginFrequency = 1
        # 头像挂件总数
        avatarPluginCount = 23
        # 头像挂件格式：png, webp
        avatarPluginSuffix = &#34;webp&#34;
</code></pre></td></tr></table></div></div><p>如果你有自己的图床，还可以配置一个给头像挂件使用的图床地址，如下：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span><span class=lnt>4
</span><span class=lnt>5
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback># 参数
[params]
  # 图床变量，末尾不需要加/
  #cdnPrefix = &#34;&#34;
  cdnPrefix = &#34;https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master&#34;
</code></pre></td></tr></table></div></div><p>这个变量不设置也没关系，不会影响挂件的功能。</p><h3 id=修改模板文件profilehtml>修改模板文件profile.html</h3><p>将<code>\themes\LoveIt\layouts\partials\home\profile.html</code>拷贝到<code>\layouts\partials\home\profile.html</code>，打开拷贝后的文件，找到下面的代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt>1
</span><span class=lnt>2
</span><span class=lnt>3
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>&lt;a href=&#34;{{ $url }}&#34;{{ with .Title | default .Name }} title=&#34;{{ . }}&#34;{{ end }}{{ if (urls.Parse $url).Host }} rel=&#34;noopener noreffer&#34; target=&#34;_blank&#34;{{ end }}&gt;
    {{- dict &#34;Src&#34; $avatar | partial &#34;plugin/image.html&#34; -}}
&lt;/a&gt;
</code></pre></td></tr></table></div></div><p>这是渲染首页头像的代码，将这段代码改成如下内容：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>{{- if $profile.avatarPluginURL -}}
	&lt;img class=&#34;site-avatar-plug-bilibili&#34; onerror=&#34;this.src=&#39;{{ $profile.avatarPluginURL }}&#39;&#34; /&gt;
	&lt;a href=&#34;javascript:void(0);&#34;{{ with .Title | default .Name }} title=&#34;Please click me~~&#34;{{ end }}{{ if (urls.Parse $url).Host }} rel=&#34;noopener noreffer&#34; target=&#34;_blank&#34;{{ end }}&gt;
		{{- dict &#34;Src&#34; $avatar &#34;Title&#34; &#34;Please click me~~&#34; | partial &#34;plugin/image.html&#34; -}}
	&lt;/a&gt;
{{- else -}}
	&lt;a href=&#34;{{ $url }}&#34;{{ with .Title | default .Name }} title=&#34;{{ . }}&#34;{{ end }}{{ if (urls.Parse $url).Host }} rel=&#34;noopener noreffer&#34; target=&#34;_blank&#34;{{ end }}&gt;
		{{- dict &#34;Src&#34; $avatar | partial &#34;plugin/image.html&#34; -}}
	&lt;/a&gt;
{{- end -}}
</code></pre></td></tr></table></div></div><h3 id=修改模板文件assetshtml>修改模板文件assets.html</h3><p>打开<code>\layouts\partials\assets.html</code>，在你引入的<code>jquery</code>的下面添加如下代码，不知道怎么引入<code>jquery</code>的请看前文：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span><span class=lnt>39
</span><span class=lnt>40
</span><span class=lnt>41
</span><span class=lnt>42
</span><span class=lnt>43
</span><span class=lnt>44
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-fallback data-lang=fallback>&lt;!-- 头像挂件 --&gt;
{{- if .IsHome -}}
	&lt;script&gt;
	{{- $profile := .Site.Params.home.profile -}}
	{{- $avatarPlugin := $profile.avatarPluginURL -}}
	{{- $avatarPluginFrequency := $profile.avatarPluginFrequency -}}
	{{- $avatarPluginCount := $profile.avatarPluginCount -}}
	{{- $avatarPluginSuffix := $profile.avatarPluginSuffix -}}
	{{- $cdnPrefix := .Site.Params.cdnPrefix -}}
	{{- if $avatarPlugin -}}
		/* 头像挂件自动刷新 */
		{{- if $profile.avatarPluginFlush -}}
			$(function () {
				$(&#34;.site-avatar-plug-bilibili&#34;).attr(&#34;src&#34;, &#34;{{ $cdnPrefix }}/images/avatar-plug/{{ $avatarPluginSuffix }}/bilibili_&#34; + (~~({{ $avatarPluginCount }}*Math.random())+1) + &#34;.{{ $avatarPluginSuffix }}&#34;);
			});
		{{- else -}}
			$(function () {
				$(&#34;.site-avatar-plug-bilibili&#34;).attr(&#34;src&#34;, &#34;{{ $cdnPrefix }}{{ $avatarPlugin }}&#34;);
			});
		{{- end -}}
		
		/* 点击头像更换b站挂件 */
		var avatar_plug = 0;
		var avatar_click = 1;
		jQuery(document).ready(function($) {
			/* 点击频率，点击几次就换挂件 */
			var frequency = {{ $avatarPluginFrequency }};
			/* 头像挂件总数 */
			var plug_count = {{ $avatarPluginCount }};
			$(&#34;div.home-avatar a&#34;).click(function(e) {
				if (avatar_click % frequency === 0) {
					avatar_plug ++;
					$(&#34;.site-avatar-plug-bilibili&#34;).attr(&#34;src&#34;, &#34;{{ $cdnPrefix }}/images/avatar-plug/{{ $avatarPluginSuffix }}/bilibili_&#34; + avatar_plug + &#34;.{{ $avatarPluginSuffix }}&#34;);
				}		
				if (avatar_plug === plug_count) {
					avatar_plug = 0;
				}
				$(&#34;div.home-avatar a&#34;).attr(&#34;alt&#34;,&#34;再点击&#34; + (frequency - avatar_click % frequency) + &#34;次头像试试看~~&#34;);
				avatar_click ++;
			});
		});
	{{- end -}}
	&lt;/script&gt;
{{- end -}}
</code></pre></td></tr></table></div></div><h3 id=添加css代码>添加css代码</h3><p>在自定义的<code>_custom.scss</code>里添加如下代码：</p><div class=highlight><div class=chroma><table class=lntable><tr><td class=lntd><pre class=chroma><code><span class=lnt> 1
</span><span class=lnt> 2
</span><span class=lnt> 3
</span><span class=lnt> 4
</span><span class=lnt> 5
</span><span class=lnt> 6
</span><span class=lnt> 7
</span><span class=lnt> 8
</span><span class=lnt> 9
</span><span class=lnt>10
</span><span class=lnt>11
</span><span class=lnt>12
</span><span class=lnt>13
</span><span class=lnt>14
</span><span class=lnt>15
</span><span class=lnt>16
</span><span class=lnt>17
</span><span class=lnt>18
</span><span class=lnt>19
</span><span class=lnt>20
</span><span class=lnt>21
</span><span class=lnt>22
</span><span class=lnt>23
</span><span class=lnt>24
</span><span class=lnt>25
</span><span class=lnt>26
</span><span class=lnt>27
</span><span class=lnt>28
</span><span class=lnt>29
</span><span class=lnt>30
</span><span class=lnt>31
</span><span class=lnt>32
</span><span class=lnt>33
</span><span class=lnt>34
</span><span class=lnt>35
</span><span class=lnt>36
</span><span class=lnt>37
</span><span class=lnt>38
</span><span class=lnt>39
</span><span class=lnt>40
</span><span class=lnt>41
</span><span class=lnt>42
</span><span class=lnt>43
</span><span class=lnt>44
</span><span class=lnt>45
</span><span class=lnt>46
</span><span class=lnt>47
</span><span class=lnt>48
</span><span class=lnt>49
</span><span class=lnt>50
</span><span class=lnt>51
</span><span class=lnt>52
</span><span class=lnt>53
</span><span class=lnt>54
</span><span class=lnt>55
</span><span class=lnt>56
</span><span class=lnt>57
</span><span class=lnt>58
</span><span class=lnt>59
</span><span class=lnt>60
</span><span class=lnt>61
</span><span class=lnt>62
</span><span class=lnt>63
</span><span class=lnt>64
</span><span class=lnt>65
</span><span class=lnt>66
</span><span class=lnt>67
</span></code></pre></td><td class=lntd><pre class=chroma><code class=language-css data-lang=css><span class=c>/* 首页头像 */</span>
<span class=c>/* bilibili头像挂件 */</span>
<span class=nt>img</span><span class=p>.</span><span class=nc>site-avatar-plug-bilibili</span> <span class=p>{</span>
    <span class=k>position</span><span class=p>:</span> <span class=kc>absolute</span><span class=p>;</span>
    <span class=k>display</span><span class=p>:</span> <span class=kc>block</span><span class=p>;</span>
    <span class=k>margin</span><span class=p>:</span> <span class=mi>-2</span><span class=kt>rem</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>padding</span><span class=p>:</span> <span class=mi>0</span><span class=p>;</span>
    <span class=k>width</span><span class=p>:</span> <span class=mi>9</span><span class=kt>rem</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>max-width</span><span class=p>:</span> <span class=mi>168</span><span class=kt>px</span><span class=p>;</span>
    <span class=k>height</span><span class=p>:</span> <span class=kc>auto</span><span class=p>;</span>
    <span class=k>box-shadow</span><span class=p>:</span> <span class=kc>none</span> <span class=cp>!important</span><span class=p>;</span>
    <span class=k>z-index</span><span class=p>:</span> <span class=mi>1</span><span class=p>;</span>
    <span class=n>pointer-events</span><span class=p>:</span> <span class=kc>none</span><span class=p>;</span>
<span class=p>}</span>

<span class=c>/* 头像旋转 */</span>
<span class=p>.</span><span class=nc>home</span> <span class=p>.</span><span class=nc>home-profile</span> <span class=p>.</span><span class=nc>home-avatar</span> <span class=nt>img</span> <span class=p>{</span>
    <span class=k>width</span><span class=p>:</span> <span class=mi>5</span><span class=kt>rem</span><span class=p>;</span>

  <span class=c>/* 设置循环动画
</span><span class=c>  [animation: 
</span><span class=c>	(play)动画名称
</span><span class=c>	(2s)动画播放时长单位秒或微秒
</span><span class=c>	(ease-out)动画播放的速度曲线为以低速结束 
</span><span class=c>	(1s)等待1秒然后开始动画
</span><span class=c>	(1)动画播放次数(infinite为循环播放) ]*/</span>
 
  <span class=c>/* 鼠标经过头像旋转360度 */</span>
  <span class=kp>-webkit-</span><span class=k>transition</span><span class=p>:</span> <span class=kp>-webkit-</span><span class=k>transform</span> <span class=mf>1.0</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>out</span><span class=p>;</span>
  <span class=kp>-moz-</span><span class=k>transition</span><span class=p>:</span> <span class=kp>-moz-</span><span class=k>transform</span> <span class=mf>1.0</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>out</span><span class=p>;</span>
  <span class=k>transition</span><span class=p>:</span> <span class=k>transform</span> <span class=mf>1.0</span><span class=kt>s</span> <span class=kc>ease</span><span class=o>-</span><span class=n>out</span><span class=p>;</span>
    <span class=err>&amp;:hover</span> <span class=err>{</span>
      <span class=c>/* 鼠标经过停止头像旋转 
</span><span class=c>      -webkit-animation-play-state:paused;
</span><span class=c>      animation-play-state:paused;*/</span>

      <span class=c>/* 鼠标经过头像旋转360度 */</span>
      <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>);</span>
      <span class=kp>-moz-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>);</span>
      <span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>360</span><span class=kt>deg</span><span class=p>);</span>
    <span class=p>}</span>
<span class=err>}</span>
<span class=c>/* Z 轴旋转动画 */</span>
<span class=p>@</span><span class=k>-webkit-keyframes</span> <span class=nt>play</span> <span class=p>{</span>
  <span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
    <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>0</span><span class=kt>deg</span><span class=p>);</span>
  <span class=p>}</span>
  <span class=nt>100</span><span class=o>%</span> <span class=p>{</span>
    <span class=kp>-webkit-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>-360</span><span class=kt>deg</span><span class=p>);</span>
  <span class=p>}</span>
<span class=p>}</span>
<span class=p>@</span><span class=k>-moz-keyframes</span> <span class=nt>play</span> <span class=p>{</span>
  <span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
    <span class=kp>-moz-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>0</span><span class=kt>deg</span><span class=p>);</span>
  <span class=p>}</span>
  <span class=nt>100</span><span class=o>%</span> <span class=p>{</span>
    <span class=kp>-moz-</span><span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>-360</span><span class=kt>deg</span><span class=p>);</span>
  <span class=p>}</span>
<span class=p>}</span>
<span class=p>@</span><span class=k>keyframes</span> <span class=nt>play</span> <span class=p>{</span>
  <span class=nt>0</span><span class=o>%</span> <span class=p>{</span>
    <span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>0</span><span class=kt>deg</span><span class=p>);</span>
  <span class=p>}</span>
  <span class=nt>100</span><span class=o>%</span> <span class=p>{</span>
    <span class=k>transform</span><span class=p>:</span> <span class=nb>rotateZ</span><span class=p>(</span><span class=mi>-360</span><span class=kt>deg</span><span class=p>);</span>
  <span class=p>}</span>
<span class=p>}</span>
</code></pre></td></tr></table></div></div><p>头像和挂件的样式代码可能根据个人的定制化而需要微调下位置之类的。至于头像挂件这些图片请去我的站点里下载下来，下面是具体地址：
<a href=https://github.com/lewky/lewky.github.io/tree/master/images/avatar-plug>https://github.com/lewky/lewky.github.io/tree/master/images/avatar-plug</a></p><h2 id=参考链接>参考链接</h2><ul><li><a href=https://github.com/DesertsP/Valine-Admin target=_blank rel="noopener noreffer">DesertsP/Valine-Admin</a></li><li><a href="https://segmentfault.com/a/1190000021474516?utm_source=tag-newest" target=_blank rel="noopener noreffer">Hexo主题使用Valine-Admin管理评论和评论提醒</a></li><li><a href=https://w4j1e.xyz/posts/lpush.html target=_blank rel="noopener noreffer">最新版基于Leancloud或javascript推送Valine评论到QQ</a></li><li><a href=https://www.antmoe.com/posts/ff6aef7b/ target=_blank rel="noopener noreffer">优雅解决LeanCloud流控问题</a></li><li><a href=https://cron-job.org/en/members/jobs/ target=_blank rel="noopener noreffer">cron-job.org</a></li><li><a href=https://qmsg.zendee.cn/ target=_blank rel="noopener noreffer">Qmsg酱</a></li><li><a href=https://www.zyoushuo.cn/post/4445.html target=_blank rel="noopener noreffer">hexo中添加鼠标右键功能</a></li><li><a href=https://www.hin.cool/posts/waline.html target=_blank rel="noopener noreffer">在搭配Volantis主题的hexo博客上使用waline</a></li></ul><div class=post-reward><input type=checkbox name=reward id=reward hidden>
<label class=reward-button for=reward>赞赏支持</label><div class=qr-code><label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/wechat.png>
<span>微信打赏</span></label>
<label class=qr-code-image for=reward><img class=image src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/common/alipay.png>
<span>支付宝打赏</span></label></div></div></div><div class=post-footer id=post-footer><div class=post-info><div class=post-info-line><div class=post-info-mod><span>更新于 2021-12-28</span></div><div class=post-info-license><span><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span></div></div><div class=post-info-line><div class=post-info-md><span><a class=link-to-markdown href=/posts/hugo-3.1.html/index.md target=_blank>阅读原始文档</a></span></div><div class=post-info-share><span><a href=javascript:void(0); title="分享到 Twitter" data-sharer=twitter data-url=https://lewky.cn/posts/hugo-3.1.html/ data-title="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章" data-hashtags=Hugo,LoveIt主题,主题美化,功能增强><i class="fab fa-twitter fa-fw"></i></a><a href=javascript:void(0); title="分享到 Facebook" data-sharer=facebook data-url=https://lewky.cn/posts/hugo-3.1.html/ data-hashtag=Hugo><i class="fab fa-facebook-square fa-fw"></i></a><a href=javascript:void(0); title="分享到 Hacker News" data-sharer=hackernews data-url=https://lewky.cn/posts/hugo-3.1.html/ data-title="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章"><i class="fab fa-hacker-news fa-fw"></i></a><a href=javascript:void(0); title="分享到 Line" data-sharer=line data-url=https://lewky.cn/posts/hugo-3.1.html/ data-title="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章"><i data-svg-src=https://cdn.jsdelivr.net/npm/simple-icons@2.14.0/icons/line.svg></i></a><a href=javascript:void(0); title="分享到 微博" data-sharer=weibo data-url=https://lewky.cn/posts/hugo-3.1.html/ data-title="Hugo系列(3.1) - LoveIt主题美化与博客功能增强 · 第二章"><i class="fab fa-weibo fa-fw"></i></a></span></div></div></div><div class=post-info-more><section class=post-tags><i class="fas fa-tags fa-fw"></i>&nbsp;<a href=/tags/hugo/>Hugo</a>,&nbsp;<a href=/tags/loveit%E4%B8%BB%E9%A2%98/>LoveIt主题</a>,&nbsp;<a href=/tags/%E4%B8%BB%E9%A2%98%E7%BE%8E%E5%8C%96/>主题美化</a>,&nbsp;<a href=/tags/%E5%8A%9F%E8%83%BD%E5%A2%9E%E5%BC%BA/>功能增强</a></section><section><span><a href=javascript:void(0); onclick=window.history.back();>返回</a></span>&nbsp;|&nbsp;<span><a href=/>主页</a></span></section></div><div class=post-nav><a href=/posts/java-generic.html/ class=prev rel=prev title="Java - 泛型"><i class="fas fa-angle-left fa-fw"></i>Java - 泛型</a>
<a href=/posts/hugo-3.2.html/ class=next rel=next title="Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章">Hugo系列(3.2) - LoveIt主题美化与博客功能增强 · 第三章<i class="fas fa-angle-right fa-fw"></i></a></div></div><div id=comments><div id=waline></div><script src=https://cdn.jsdelivr.net/npm/@waline/client/dist/Waline.min.js></script><script>new Waline({el:'#waline',meta:["nick","mail","link"],requiredMeta:["nick","mail"],login:"force",placeholder:"为防恶意灌水攻击，评论前需注册并登录，望见谅~",serverURL:"https://comment.lewky.cn/",avatarCDN:"https://sdn.geekzu.org/avatar/",pageSize:20,avatar:"retro",lang:"zh-CN",visitor:true,highlight:true,uploadImage:false,emoji:['https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/嘉然今天吃什么','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/大航海嘉然','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/向晚大魔王','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/贝拉kira','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/珈乐Carol','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/乃琳Queen','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/EveOneCat','https://cdn.jsdelivr.net/gh/walinejs/emojis@1.0.0/weibo','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/滑稽','https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/emoji/default']});</script></div></article></div></main><footer class=footer><div class=footer-container><div class=footer-line><span id=run-time></span>|
<a href=http://rssblog.vercel.app/ target=_blank rel=noopener title=RSSBlog><i class="fas fa-fw fa-inbox"></i>&nbsp;RSSBlog</a></div><div class=footer-line><i class="far fa-copyright fa-fw"></i><span itemprop=copyrightYear>2018 - 2022</span><span class=author itemprop=copyrightHolder>&nbsp;<a href=/ target=_blank>雨临Lewis</a></span>&nbsp;|&nbsp;<span class=license><a rel="license external nofollow noopener noreffer" href=https://creativecommons.org/licenses/by-nc/4.0/ target=_blank>CC BY-NC 4.0</a></span><span class=icp-splitter>&nbsp;|&nbsp;</span><br class=icp-br><span class=icp><a target=_blank href=http://www.beian.miit.gov.cn/ style=font-weight:700>粤ICP备19103822</a></span></div></div></footer></div><div id=fixed-buttons><a href=# id=back-to-top class=fixed-button title=回到顶部><i class="fas fa-arrow-up fa-fw"></i></a><a href=# id=view-comments class=fixed-button title=查看评论><i class="fas fa-comment fa-fw"></i></a></div><div class=sidebar_wo><div id=leimu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/leimuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/leimuA.png'" title=回到顶部></div><div class=sidebar_wo id=lamu><img src=https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master/images/b2t/lamuA.png alt=雷姆 onmouseover="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuB.png'" onmouseout="this.src='https:\/\/cdn.jsdelivr.net\/gh\/lewky\/lewky.github.io@master/images/b2t/lamuA.png'" title=回到底部></div></div><link rel=stylesheet href=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/css/lightgallery.min.css><script type=text/javascript src=https://cdn.jsdelivr.net/npm/smooth-scroll@16.1.3/dist/smooth-scroll.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lightgallery.js@1.2.0/dist/js/lightgallery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-thumbnail.js@1.2.0/dist/lg-thumbnail.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/lg-zoom.js@1.2.0/dist/lg-zoom.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js></script><script type=text/javascript>window.config={"code":{"copyTitle":"复制到剪贴板","maxShownLines":30},"comment":{},"lightGallery":{"actualSize":false,"exThumbImage":"data-thumbnail","hideBarsDelay":2000,"selector":".lightgallery","speed":400,"thumbContHeight":80,"thumbWidth":80,"thumbnail":true}};</script><script type=text/javascript src=/js/theme.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js></script><script type=text/javascript src=https://cdn.jsdelivr.net/npm/jquery-backstretch@2.1.18/jquery.backstretch.min.js></script><script>var $cdnPrefix="https://cdn.jsdelivr.net/gh/lewky/lewky.github.io@master";</script><script type=text/javascript src=/js/custom.js></script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?6f278ed0fdb01edb3b1e7398379e5432";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></body></html>